<template>
  <BasicDrawer v-bind="$attrs" @register="registerBaseDrawer" title="导入表" :width="800" destroyOnClose showFooter>
    <BasicTable @register="registerTable" :rowSelection="rowSelection" />
    <template #footer>
      <a-button @click="handleSubmit(true)" type="primary" :loading="loading" style="margin-right: 0.9rem">确定</a-button>
      <PopConfirmButton title="确定放弃选择？" @confirm="closeDrawer" okText="确定" cancelText="取消">取消</PopConfirmButton>
    </template>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { ref, onMounted, unref } from "vue"
  import { BasicTable, useTable } from "/@/components/Table"
  import { listAllDataSource, listDbTable } from "./api"
  import { BasicDrawer, useDrawer, useDrawerInner } from "/@/components/Drawer"
  import { tableColumns, searchTableFormSchema } from "./data"
  import { PopConfirmButton } from "/@/components/Button"
  import { useMessage } from "/@/hooks/web/useMessage"

  const loading = ref(false)
  const checkedKeys = ref<any>([])
  const emit = defineEmits(["register", "select"])

  const [registerTable, { reload, getForm, setProps }] = useTable({
    title: "",
    api: listDbTable,
    immediate: false,
    columns: tableColumns,
    rowSelection: {
      selectedRowKeys: checkedKeys,
      type: "radio",
      onChange: (selectedRowKeys: (string | number)[]) => (checkedKeys.value = selectedRowKeys),
      columnWidth: 60,
    },
    formConfig: {
      showResetButton: false,
      labelWidth: 60,
      schemas: searchTableFormSchema,
      autoSubmitOnEnter: true,
      wrapperCol: { lg: 24, md: 24 },
      baseColProps: { lg: 8, md: 8 },
    },

    striped: true,
    useSearchForm: true,
    showTableSetting: true,
    clickToRowSelect: false,
    bordered: true,
    showIndexColumn: false,
    // tableSetting: {fullScreen: true},
    canResize: false,
    rowKey: "tableName",
  })

  const [registerBaseDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setProps({})
    checkedKeys.value = []
    const { updateSchema } = getForm()
    await updateSchema({
      field: "datasourceId",
      componentProps: ({ formModel, formActionType }) => {
        const { setFieldsValue } = formActionType
        return {
          optionFilterProp: "label",
          showSearch: true,
          api: listAllDataSource,
          onOptionsChange: (options) => {
            if (options && options.length > 0) {
              setFieldsValue({ datasourceId: options[0].value })
              reload()
            }
          },
          onSelect: (value: any, option: any) => {
            console.log("option", option)
            setFieldsValue({ datasourceId: option.value })
            reload()
          },
        }
      },
    })
  })

  /**
   * 选择列配置
   */
  const rowSelection = {
    type: "checkbox",
    columnWidth: 50,
    selectedRowKeys: checkedKeys,
    onChange: onSelectChange,
  }

  /**
   * 选择事件
   */
  function onSelectChange(selectedRowKeys: (string | number)[], selectionRows) {
    checkedKeys.value = selectedRowKeys
  }

  /**
   * 提交
   */
  async function handleSubmit(exit) {
    // 参数是tables
    loading.value = true
    try {
      const fromParams = await getForm().validate()

      emit("select", { tableNames: unref(checkedKeys), ...fromParams })
      exit && closeDrawer()
    } catch (e) {
      console.log(e)
    } finally {
      loading.value = false
    }
  }
</script>
